<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/8/20
  Time: 19:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>信息管理系统</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
  <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    function insertSubmit(){
      $("#insertForm").submit();
    }
    function updateSubmit(){
      $("#updateForm").submit();

    }
    function del(staffId){
      if (confirm("确定删除吗")) {
        //发出ajax请求进行删除
        $.ajax({
          url:"${pageContext.request.contextPath}/staff/delete.action",
          data:{"staffId":staffId},
          type:"post",
          success:function (){

          }
        });
      }
    }
    function getStaff(staffId){
      $.ajax({
        url:"${pageContext.request.contextPath}/pManager/getStaffById.action",
        data:{"staffId":staffId},
        type:"get",
        dataType:'json',
        success:function (data) {
          $("#id2").val(data.staffId);
          $("#password2").val(data.staffPassword);
          $("#name2").val(data.staffName);
          $("#age2").val(data.staffAge);
          $("#sex2").val(data.staffSex);
          $("#wage2").val(data.staffWage);
          $("#phone2").val(data.staffPhone);
          $("#client2").val(data.clientId);
          $("#project2").val(data.projectName);
          $("#department2").val(data.departmentName);
        }
      })
    }
  </script>
</head>

<body>
<!-- 导航条 -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- 屏幕自适应 -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">信息管理系统<small> V1.0</small></a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <!-- 导航条最右边 -->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">欢迎: <span class="text-danger">${name}</span></a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false">个人中心<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">我的积分</a></li>
            <!-- 分隔线 -->
            <li role="separator" class="divider"></li>
            <li><a href="#">修改密码</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">我的消息</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- 页面中心内容 -->
<div class="row">
  <div class="col-md-2">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <!-- 一个面板 -->
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              <span class="glyphicon glyphicon-knight"></span>信息管理
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            <!-- 列表组 -->
            <ul class="list-group">
              <li class="list-group-item"><a href="${pageContext.request.contextPath}/pManager/select.action?id=${id}">个人信息</a></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 一个面板 -->
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
              <span class="glyphicon glyphicon-user"></span>部门管理
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingTwo">
          <div class="panel-body">
            <!-- 列表组 -->
            <ul class="list-group">
              <li class="list-group-item"><a href="${pageContext.request.contextPath}/pManager/selectStaff.action?departmentName=${departmentName}">职员列表</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-10">
    <!-- 页头 -->
    <div class="page-header" style="margin-top: -20px;margin-bottom: 0px;">
      <h3>用户管理</h3>
    </div>
    <!-- 标签页 -->
    <div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs list-unstyled" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">用户列表</a></li>
        <li><button class="btn btn-success btn-sm"  data-toggle="modal" data-target="#insertUserModal" style="margin-top: 6px;">添加用户信息</button></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content" id="split">
        <div role="tabpanel" class="tab-pane active" id="home">
          <!-- 用户表格 -->
          <table id="table" class="table table-bordered table-hover table-striped">
            <tr>
              <th>姓名</th>
              <th>年龄</th>
              <th>性别</th>
              <th>工资</th>
              <th>电话</th>
              <th>项目</th>
              <th>客户</th>
              <th>操作</th>
            </tr>
            <c:forEach items="${staffList}" var="p">
              <tr>
                <td>${p.staffName}</td>
                <td>${p.staffAge}</td>
                <td>${p.staffSex}</td>
                <td>${p.staffWage}</td>
                <td>${p.staffPhone}</td>
                <td>${p.projectName}</td>
                <td>${p.clientId}</td>
                <td>
                  <a href="" class="btn btn-danger btn-sm" onclick="del('${p.staffId}')">删除</a>
                  <a onclick="getStaff('${p.staffId}')" data-toggle="modal" data-target="#updateUserModal" class="btn btn-info btn-sm">修改</a>
                </td>
              </tr>
            </c:forEach>
          </table>


        </div>
      </div>
    </div>
  </div>
</div>
<!-- 添加用户的对话框 ,添加id为insertUserModel-->
<div class="modal fade" tabindex="-1" role="dialog" id="insertUserModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">保存用户信息</h4>
      </div>
      <div class="modal-body">
        <form  id="insertForm" action="${pageContext.request.contextPath}/pManager/insertStaff.action">
          <div class="form-group">
            <label for="id">账号</label>
            <input type="text" class="form-control"name="staffId" id="id" placeholder="账号">
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" name="staffPassword" id="password" placeholder="密码">
          </div>
          <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" class="form-control" name="staffName" id="name" placeholder="姓名">
          </div>
          <div class="form-group">
            <label for="age">年龄</label>
            <input type="text" class="form-control" name="staffAge" id="age" placeholder="年龄">
          </div>
          <div class="form-group">
            <label for="sex">性别</label>
            <input type="text" class="form-control" name="staffSex" id="sex" placeholder="性别">
          </div>
          <div class="form-group">
            <label for="wage">工资</label>
            <input type="text" class="form-control" name="staffWage" id="wage" placeholder="工资">
          </div>
          <div class="form-group">
            <label for="phone">电话</label>
            <input type="text" class="form-control" name="staffPhone" id="phone" placeholder="电话">
          </div>
          <div class="form-group">
            <label for="project">项目</label>
            <input type="text" class="form-control" name="projectName" id="project" placeholder="项目">
          </div>
          <div class="form-group">
            <label for="client">客户</label>
            <input type="text" class="form-control" name="clientId" id="client" placeholder="客户">
          </div>
          <div class="form-group">
            <label for="department">部门</label>
            <input readonly type="text" value="${departmentName}" class="form-control" name="departmentName" id="department" placeholder="部门">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消添加</button>
        <button type="button" class="btn btn-primary" id="insertBtn" onclick="insertSubmit()">确认添加</button>
      </div>
    </div>
  </div>
</div>
<!-- 更新用户的模态框，id为updateUserModal -->
<div class="modal fade" tabindex="-1" role="dialog" id="updateUserModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">保存员工信息</h4>
      </div>
      <div class="modal-body">
        <form method="post" action="${pageContext.request.contextPath}/pManager/updateStaff.action" id="updateForm">
          <div class="form-group">
            <label for="id2">账号</label>
            <input readonly type="text" class="form-control" name="staffId" id="id2" placeholder="账号">
          </div>
          <div class="form-group">
            <input  type="hidden" class="form-control" name="staffPassword" id="password2" placeholder="密码">
          </div>
          <div class="form-group">
            <label for="name2">姓名</label>
            <input  type="text" class="form-control" name="staffName" id="name2" placeholder="姓名">
          </div>
          <div class="form-group">
            <label for="age2">年龄</label>
            <input type="text" class="form-control" name="staffAge" id="age2" placeholder="年龄">
          </div>
          <div class="form-group">
            <label for="sex2">性别</label>
            <input type="text" class="form-control" name="staffSex" id="sex2" placeholder="性别">
          </div>
          <div class="form-group">
            <label for="wage2">工资</label>
            <input type="text" class="form-control" name="staffWage" id="wage2" placeholder="工资">
          </div>
          <div class="form-group">
            <label for="phone2">电话</label>
            <input type="text" class="form-control" name="staffPhone" id="phone2" placeholder="电话">
          </div>
          <div class="form-group">
            <label for="project2">项目</label>
            <input type="text" class="form-control" name="projectName" id="project2" placeholder="项目">
          </div>
          <div class="form-group">
            <label for="client2">客户</label>
            <input type="text" class="form-control" name="clientId" id="client2" placeholder="客户">
          </div>
          <div class="form-group">
            <label for="department2">部门</label>
            <input type="text" readonly class="form-control" name="departmentName" id="department2" placeholder="部门">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消更新</button>
        <button type="button" class="btn btn-primary" onclick="updateSubmit()">确认更新</button>
      </div>
    </div>
  </div>
</div>
</body>

</html>
